<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>app</h1>
        <p>msg:{{msg}}</p>
        <!-- vue2中，组件的v-model，默认找组件的value属性和input事件  -->
        <!-- vue3中，组件的v-model，默认找组件的modelvalue属性和 update:modelValue 事件  -->
        <book name="三国演义" v-model="msg" ></book>
        <!-- <book name="三国演义" :model-value="msg" @update:model-value="changeVal" ></book> -->
        <hr/>
        <p>str:{{str}}</p>
        <!-- 自定义v-model绑定的属性 -->
        <comments v-model:title="str" v-model:p="msg" ></comments>
    </div>
</body>
</html>
<script src="./js/vue.global.js"></script>
<script>

    let Book = {
        props:["name","modelValue"],
        emits:["update:modelValue"],
        template:`
            <h1>书籍信息</h1>
            <div>
                <p>书名：{{name}}</p>
                <p>model-value:{{modelValue}}</p>
                <p @click="clickHandle">作者：{{author}}</p>       
            </div>
            <hr/>
        `,
        data(){
            return {
                author:"罗贯中"
            }
        },
        methods:{
            clickHandle(){
                this.$emit("update:modelValue","hello");
            }
        }
    }

    let comments={
        props:["title","p"],
        emits:["update:title","update:p"],
        template:`
            <h5>comments组件</h5>
            <div>title:{{title}}</div>
            <input type="text" @input="inputHandle" />
            <input type="text" @input="inputHandle02" />
        `,
        methods:{
            inputHandle(e){
                this.$emit("update:title",e.target.value);
            },
            inputHandle02(){
                this.$emit("update:p",e.target.value);
            }
        }
    }


     let app = Vue.createApp({
        data(){
            return {
                msg:"hi",
                str:"呵呵"         
            }
        },
        components:{comments},
        methods:{
            changeVal(str){
                this.msg = str;
            }
        } 
    });

    // book组件是在app上全局注册的。
    app.component("book",Book);
    

    app.mount("#app");


    let app2 = Vue.createApp({
        data(){
            return {}
        }
    }); 
    
    app2.mount("#app2");
    



</script>